<template>
	<view class="asset-container">
		<!-- 顶部导航栏 -->
		<u-navbar :title="title" left-icon="arrow-left" left-icon-color="#303133" bg-color="#ffffff" fixed placeholder
			@left-click="back" />

		<!-- 资产总览区域 -->
		<view class="asset-overview"
			:style="{ background: 'linear-gradient(180deg, #1570DC 0%,rgba(21,112,112,0) 100%)' }">
			<view class="asset-balance">
				<view class="balance-header">
					<text class="balance-label">我的资产（元）</text>
					<up-icon :name="showAsset ? 'eye-fill' : 'eye-off'" size="18" color="#fff"
						@click="toggleAssetVisibility" class="eye-icon" />
					<view class="balance-tag">最高年化收益率{{assetData.rate}}%</view>
				</view>
				<text class="balance-value">{{ showAsset ? userInfo.amount ?? 0 : '****' }}</text>
			</view>

			<view class="asset-stats">
				<view class="stat-item">
					<text class="stat-label">昨日收益(元)</text>
					<text class="stat-value">{{ showAsset ? userInfo.lastAmountAdd ?? 0 : '**' }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">累计收益(元)</text>
					<text class="stat-value">{{ showAsset ? userInfo.amountAddSum ?? 0 : '**' }}</text>
				</view>
			</view>
			<view style="display: flex; padding: 0 30rpx;">
				<up-button type="primary"
					style="width: 102pt;border-radius: 5pt;line-height: 20pt;; margin:0px;margin-right:30px;font-size: 14pt;background-color:#1570DC;"
					@click="toPay">转入</up-button>
				<up-button type="primary" plain
					style=" width: 102pt;border-radius: 5pt; line-height: 20pt; margin:0px;font-size: 14pt;"
					@click="withdraw">转出</up-button>
			</view>
		</view>
		<!-- 资产明细区域 -->
		<view class="asset-detail">
			<view class="detail-header">
				<text class="detail-title">资产明细</text>
				<u-divider></u-divider>
			</view>

			<view class="detail-list">
				<view v-for="(item, index) in assetDetails" :key="index" class="detail-item">
					<view class="item-row" style="margin-bottom: 30rpx;">
						<text class="item-type">{{ getTypeText(item.type) }}</text>
						<text
							class="amount-expense">{{ item.amount.indexOf('-') == -1 ? '+' : '' }}{{ item.amount }}</text>
					</view>
					<view class="item-row">
						<text class="item-time">{{ item.createGtm }}</text>
						<text class="item-balance">资产余额：¥{{ item.nextAmount }}</text>
					</view>
					<u-divider></u-divider>
				</view>
			</view>

			<view class="loading-footer" v-if="loading">
				<text>加载中...</text>
			</view>
			<view class="loading-footer" v-else>
				<text>已经到底了~</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onReachBottom,
		onShow
	} from "@dcloudio/uni-app"
	import {
		navigate as publicNavigate
	} from "@/utils/public.js";
	import * as Auth from '@/api/auth.js'
	import {
		getListByVo
	} from "@/api/amount.js";
	import {
		getById
	} from "@/api/sysConfig.js";
	import {
		createOrder
	} from "@/api/pay.js"


	const back = () => {
		publicNavigate("back");
	};
	// 设置页面标题
	const title = ref("我的资产");

	// 资产显示状态
	const showAsset = ref(false);

	// 切换资产显示/隐藏
	const toggleAssetVisibility = () => {
		showAsset.value = !showAsset.value;
	};

	// 资产数据对象 - 双向绑定
	const assetData = reactive({
		rate: 2.01
	});

	// 资产明细数据
	const assetDetails = ref([{
			type: "1",
			createGtm: "2025-09-09 11:29:25",
			amount: "0.01",
			isIncome: false,
			nextAmount: 3.05
		},
		{
			type: "0",
			createGtm: "2025-09-08 11:29:25",
			amount: "10000",
			isIncome: true,
			nextAmount: 3.06
		},
		{
			type: "2",
			createGtm: "2025-09-08 11:29:23",
			amount: "-0.01",
			isIncome: true,
			nextAmount: -9996.94
		},
		{
			type: "1",
			createGtm: "2025-09-08 11:29:22",
			amount: "0.01",
			isIncome: false,
			nextAmount: -9996.95
		},
		{
			type: "1",
			createGtm: "2025-09-08 11:29:21",
			amount: "-0.01",
			isIncome: false,
			nextAmount: -9996.96
		}
	]);
	const getTypeText = (type) => {
		switch (type) {
			case '0':
				return "收入-工资发放";
			case '1':
				return "支出-提现";
			case '2':
				return "收入-资产收益";
			case '3':
				return "收入-余额充值";
			case '4':
				return "收入-提现退回";
			default:
				return "未知";
		}
	};
	// 加载状态
	const loading = ref(false);

	// 提现功能
	const withdraw = () => {
		publicNavigate("/pages/my/withdraw/withdraw")
	};
	// 提现功能
	const toPay = () => {
		publicNavigate("/pages/my/pay/pay")
	};

	const userInfo = ref({
		info: {
			name: '---',
			jobName: '---',
			avatar: '/static/logo.png',
		},
		lastAmountAdd: 0,
		amountAddSum: 0,
		amount: 0
	});
	const flushInfo = () => {
		Auth.getInfo().then(res => {
			if (res.code == 200) {
				// console.log(res.data)
				uni.setStorageSync('userInfo', JSON.stringify(res.data));
				// console.log("userInfo", uni.getStorageSync('userInfo'));
				userInfo.value = res.data
			}
		})
	}
	const getRate = () => {
		getById(1).then(res => {
			if (res.code == 200) {
				assetData.rate = parseFloat(res.data.vo.value) * 365
			} else {
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
				console.error(res)
			}
		}).catch(err => {
			console.err(err)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
		})
		// getById(2).then(res=>{
		// 	if(res.code == 200){
		// 		assetData.withRate = parseFloat(res.data.value).toFixed(4)
		// 	}else{
		//     uni.showToast({
		//       title: '加载失败',
		//       icon: 'none'
		//     });
		//     console.error(res)
		//   }
		// }).catch(err=>{
		//   console.err(err)
		//   uni.showToast({
		//     title: '加载失败',
		//     icon: 'none'
		//   });
		// })
	}
	const pageNum = ref(1);
	const pageSize = ref(10);
	// 是否正在加载中，用于防重复加载
	const isLoading = ref(false);

	// 页面滚动监听，实现滑动到底部自动加载更多
	onReachBottom(async (e) => {
		// 如果已经没有更多数据或者正在加载中，则不执行
		if (!loading.value || isLoading.value) {
			return;
		}
		try {
			isLoading.value = true;
			console.log('滑动到底部，加载更多数据');
			await getList(); // 调用现有的获取列表方法加载更多数据
		} catch (error) {
			console.error('滚动监听异常:', error);
		} finally {
			isLoading.value = false;
		}
	});
	const getList = async (isFlush = false) => {
		if (isFlush) {
			pageNum.value = 1
		}
		console.log(userInfo.value.info.id)
		let tmp = JSON.parse(uni.getStorageSync('userInfo'))
		const res = await getListByVo({
			employeeId: tmp.info.id,
		}, {
			page: pageNum.value,
			size: pageSize.value
		}).catch(err => {
			console.log(err)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
		})
		if (res.code == 200) {
			console.log(res.data)
			if (pageNum.value == 1) {
				assetDetails.value.splice(0, assetDetails.value.length)
			}
			if (res.data.total == assetDetails.value.length + res.data.list.length) {
				loading.value = false
			} else {
				loading.value = true
			}
			assetDetails.value = assetDetails.value.concat(res.data.list)
			pageNum.value++
			// console.log("userInfo", uni.getStorageSync('userInfo'));
		} else {
			console.log(res.msg)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
		}
	}


	getRate()
	// 组件挂载时的初始化
	onShow(() => {
		flushInfo()
		getList(true)
	});
</script>

<style lang="scss" scoped>
	.asset-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 资产总览样式 */
	.asset-overview {
		padding: 30rpx;
		color: #fff;
		border-radius: 0 0 30rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.asset-balance {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.balance-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		padding: 30rpx;
	}

	.balance-label {
		line-height: 20pt;
		color: rgba(16, 16, 16, 1);
		font-size: 14pt;
		text-align: left;
	}

	.eye-icon {
		margin-right: 10rpx;
	}

	.balance-tag {
		line-height: 17pt;
		border-radius: 5pt;
		background-color: rgba(255, 203, 167, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 20rpx;
		text-align: center;
		padding: 0 10rpx;
	}

	.balance-value {
		font-size: 64rpx;
		font-weight: bold;
		display: block;
		text-align: left;
		padding: 0 30rpx;
		color: #000;
	}

	.asset-stats {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}

	.stat-item {
		text-align: center;
		padding-right: 100rpx;
	}

	.stat-label {
		line-height: 17pt;
		color: rgba(108, 104, 104, 1);
		font-size: 12pt;
		text-align: left;
		display: block;
	}

	.stat-value {
		display: block;
		line-height: 20pt;
		color: rgba(0, 0, 0, 1);
		font-size: 14pt;
		text-align: left;
		margin-top: 5rpx;
	}

	.withdraw-btn {
		background-color: #fff;
		color: #4e8bff;
		border-radius: 44rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		width: 80%;
		margin: 0 auto;
		display: block;
		border: none;
	}

	/* 资产明细样式 */
	.asset-detail {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.detail-header {
		padding: 0;
		margin: 0 30rpx;
	}

	.detail-title {
		line-height: 20pt;
		color: rgba(16, 16, 16, 1);
		font-size: 14pt;
		text-align: left;

	}

	.asset-detail {
		display: flex;
		flex-direction: column;
		min-height: 400rpx;
		padding: 0 30rpx 30rpx;
	}

	.detail-list {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 20rpx;
	}

	.loading-footer {
		padding: 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.detail-item {
		padding: 0;
		margin: 0 30rpx;
	}

	.item-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.item-balance {
		line-height: 14pt;
		color: rgba(0, 0, 0, 0.82);
		font-size: 10pt;
		text-align: left;
	}

	.item-info {
		flex: 1;
	}

	.item-type {
		line-height: 17pt;
		color: rgba(16, 16, 16, 1);
		font-size: 12pt;
		text-align: left;
	}

	.item-time {
		line-height: 14pt;
		color: rgba(80, 85, 89, 0.82);
		font-size: 10pt;
		text-align: left;
	}

	.item-amount {
		text-align: right;
	}

	.amount-income {
		color: #07c160;
		font-size: 14pt;
		font-weight: bold;
	}

	.amount-expense {
		line-height: 17pt;
		color: rgba(0, 0, 0, 1);
		font-size: 12pt;
		text-align: left;
	}

	.loading-footer {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>